<template>
  <div class="me-box">
    <div class="navigate-wrp">
      <div class="icon-wrp">
        <span>设置</span>
      </div>
    </div>
    <div class="top-box">
      <p>账号</p>
      <span>test1@qq.com</span>
    </div>
    <div class="top-box" style="padding: 0 0.8rem">
      <div
        class="content-box"
        v-for="(item, index) in items"
        :key="item"
        :style="{ 'border-bottom': index === items.length - 1 && 0 }"
      >
        <span>{{ item }}</span> <span style="font-size: 1.5rem">></span>
      </div>
    </div>
    <div class="footer-botton">
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        "联系客服",
        "问题解答",
        "价格计划",
        "进入官网",
        "加入群组",
        "语言",
        "更多内容",
      ],
    };
  },
  methods: {
    logout() {
      this.$router.push({
        path: "/login",
        replace: true,
      });
    },
  },
};
</script>


<style scoped>
.navigate-wrp {
  box-sizing: border-box;
}
.navigate-wrp .icon-wrp {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  line-height: 40px;
  font-size: 22px;
  font-weight: 500;
  box-sizing: border-box;
}

.me-box {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.me-box strong {
  font-size: 2rem;
  font-weight: 700;
}
.top-box {
  width: 80vw;
  border-radius: 0.8rem;
  padding: 0.8rem;
  margin-top: 1.2rem;
  box-shadow: 2px 2px 7px 0 rgb(0, 0, 0, 0.2);
}

.top-box p {
  font-size: 1.2rem;
  font-weight: 700;
}

.content-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 1rem;
}
.content-box:hover {
  color: #525252;
  cursor: pointer;
}

.content-box span {
  font-size: 1rem;
  font-weight: 700;
}

.footer-botton {
  margin-top: 3rem;
  width: 100%;
  text-align: center;
}
.footer-botton button {
  border: 0;
  width: 30vw;
  height: 4rem;
  background: #111111;
  color: #fff;
  font-size: 1rem;
  border-radius: 6rem;
}
.footer-botton button:hover {
  cursor: pointer;
  background: #111111ef;
}
</style>